<template>
  <a-modal
    v-model:visible="visible"
    :title="`${filterItem.title}-过滤器设置`"
    unmount-on-close
    width="70%"
    ok-text="保存配置"
    draggable
    @ok="onSubmit"
  >
    <a-form class="w-full">
      <template v-if="filterItem.type === 'D'">
        <template v-if="filterItem.dataType.includes('yy')">
          <a-form-item label="过滤方式">
            <a-radio-group v-model="filterOption.filterType">
              <a-radio value="1">单日期</a-radio>
              <a-radio value="2">日期区间</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="过滤形式">
            <a-radio-group v-model="filterOption.filterForm">
              <a-radio value="1">相对时间</a-radio>
              <a-radio value="2">固定时间</a-radio>
            </a-radio-group>
          </a-form-item>
          <template v-if="filterOption.filterForm === '1'">
            <a-form-item label="开始时间">
              <a-space size="small" separator="-" align="start">
                <a-select
                  size="small"
                  class="w-20"
                  v-model="filterOption.date.startDate.dateType"
                  :options="dateTypeMode"
                  tips="日期类型"
                />
                <a-select size="small" class="w-20" v-model="filterOption.date.startDate.dateRelative" tips="计算">
                  <a-option value="-">-</a-option>
                  <a-option value="+">+</a-option>
                </a-select>
                <a-input-number
                  size="small"
                  min="0"
                  v-model="filterOption.date.startDate.dateValue"
                  placeholder="请输入数值"
                  tips="天数"
                  @change="dateValueChange($event, 'startDate')"
                />
                <a-select
                  v-if="filterOption.filterType === '1'"
                  size="small"
                  style="width: 120px"
                  v-model="filterOption.filterCondition.function[0]"
                  tips="过滤条件"
                >
                  <a-option
                    v-for="item in condition.DATETIME"
                    :key="item.function"
                    :value="item.function"
                    :label="item.label"
                  />
                </a-select>
                <a-date-picker
                  tips="对应日期"
                  size="small"
                  @change="dateDayChange($event, 'startDate')"
                  v-model="filterOption.date.startDate.dateDay"
                />
              </a-space>
            </a-form-item>
            <a-form-item label="结束时间" v-if="filterOption.filterType === '2'">
              <a-space size="small" separator="-" align="center">
                <a-select
                  size="small"
                  class="w-20"
                  v-model="filterOption.date.endDate.dateType"
                  :options="dateTypeMode"
                  tips="日期类型"
                />
                <a-select size="small" class="w-20" v-model="filterOption.date.endDate.dateRelative" tips="计算">
                  <a-option value="-">-</a-option>
                  <a-option value="+">+</a-option>
                </a-select>
                <a-input-number
                  size="small"
                  min="0"
                  v-model="filterOption.date.endDate.dateValue"
                  placeholder="请输入数值"
                  tips="天数"
                  @change="dateValueChange($event, 'endDate')"
                />
                <a-select
                  v-if="filterOption.filterType === '1'"
                  size="small"
                  style="width: 100px"
                  v-model="filterOption.filterCondition.function[1]"
                  placeholder="请选择过滤条件"
                  tips="过滤条件"
                >
                  <a-option
                    v-for="item in condition.DATETIME"
                    :key="item.function"
                    :value="item.function"
                    :label="item.label"
                  />
                </a-select>
                <a-date-picker
                  tips="对应日期"
                  size="small"
                  @change="dateDayChange($event, 'endDate')"
                  v-model="filterOption.date.endDate.dateDay"
                />
              </a-space>
            </a-form-item>
          </template>
          <template v-if="filterOption.filterForm === '2'">
            <a-form-item label="过滤条件">
              <template v-if="filterOption.filterType === '2'">
                <a-range-picker v-model="filterOption.filterCondition.value" />
              </template>
              <a-space v-else size="small" separator="-" align="center">
                <a-select
                  size="small"
                  style="width: 100px"
                  v-model="filterOption.filterCondition.function[0]"
                  placeholder="请选择过滤条件"
                  tips="过滤条件"
                >
                  <a-option
                    v-for="item in condition.DATETIME"
                    :key="item.function"
                    :value="item.function"
                    :label="item.label"
                  />
                </a-select>
                <a-date-picker
                  size="small"
                  v-model="filterOption.filterCondition.value[0]"
                  type="date"
                  placeholder="开始日期"
                  tips="开始日期"
                />
              </a-space>
            </a-form-item>
          </template>
        </template>
        <template v-else>
          <a-form-item label="过滤方式">
            <a-radio-group v-model="filterOption.filterType">
              <a-radio value="1">按条件过滤</a-radio>
              <a-radio value="2">按枚举过滤</a-radio>
            </a-radio-group>
          </a-form-item>
          <template v-if="filterOption.filterType === '1'">
            <a-form-item label="过滤形式">
              <a-radio-group v-model="filterOption.filterForm">
                <a-radio value="1">单条件</a-radio>
                <a-radio value="2">或条件</a-radio>
                <a-radio value="3">且条件</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="过滤条件">
              <template v-if="['1'].includes(filterOption.filterForm)">
                <a-input v-model="filterOption.filterCondition.value[0]" placeholder="请输入过滤条件" allow-clear>
                  <template #prepend>
                    <a-select v-model="filterOption.filterCondition.function[0]" placeholder="请选择过滤条件">
                      <a-option
                        v-for="item in condition.STRING"
                        :key="item.function"
                        :value="item.function"
                        :label="item.label"
                      />
                    </a-select>
                  </template>
                </a-input>
              </template>
              <template v-if="['2', '3'].includes(filterOption.filterForm)">
                <a-space direction="horizontal" align="center">
                  <div>{{ filterOption.filterForm === "2" ? "或" : "且" }}</div>
                  <a-space direction="vertical">
                    <a-input v-model="filterOption.filterCondition.value[0]" placeholder="请输入过滤条件" allow-clear>
                      <template #prepend>
                        <a-select v-model="filterOption.filterCondition.function[0]" placeholder="请选择过滤条件">
                          <a-option
                            v-for="item in condition.STRING"
                            :key="item.function"
                            :value="item.function"
                            :label="item.label"
                          />
                        </a-select>
                      </template>
                    </a-input>
                    <a-input v-model="filterOption.filterCondition.value[1]" placeholder="请输入过滤条件" allow-clear>
                      <template #prepend>
                        <a-select v-model="filterOption.filterCondition.function[1]" placeholder="请选择过滤条件">
                          <a-option
                            v-for="item in condition.STRING"
                            :key="item.function"
                            :value="item.function"
                            :label="item.label"
                          />
                        </a-select>
                      </template>
                    </a-input>
                  </a-space>
                </a-space>
              </template>
            </a-form-item>
          </template>
          <template v-if="filterOption.filterType === '2'">
            <a-form-item label="过滤形式">
              <a-radio-group v-model="filterOption.filterForm">
                <a-radio value="1">单选</a-radio>
                <a-radio value="2">多选</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="过滤条件" help="获取枚举根据数据大小，可能会查询时间较长，请耐心等待">
              <a-space>
                <template v-if="['1'].includes(filterOption.filterForm)">
                  <a-select
                    autoWidth
                    scrollbar
                    v-model="filterOption.filterCondition.value[0]"
                    placeholder="请选择过滤值"
                    auto-width
                    allow-clear
                    allow-search
                  >
                    <a-option v-for="item in enumList" :key="item.value" :value="item.value" :label="item.label" />
                  </a-select>
                </template>
                <template v-if="['2'].includes(filterOption.filterForm)">
                  <a-space direction="vertical">
                    <a-select
                      autoWidth
                      scrollbar
                      v-model="filterOption.filterCondition.value"
                      placeholder="请选择过滤值"
                      multiple
                      :max-tag-count="4"
                      allow-clear
                      allow-search
                    >
                      <template #header>
                        <div style="padding: 6px 12px">
                          <a-checkbox value="1" @change="allSelect">全选</a-checkbox>
                        </div>
                      </template>
                      <a-option v-for="item in enumList" :key="item.value" :value="item.value" :label="item.label" />
                    </a-select>
                    <a-checkbox v-model="filterOption.filterCondition.exclude">排除选择的数据</a-checkbox>
                  </a-space>
                </template>
                <a-space>
                  <a-button size="small" type="outline" @click="enumFormVisible = true"> 选择枚举 </a-button>
                  <a-button
                    size="small"
                    status="danger"
                    type="outline"
                    @click="getEnumList(currentComponent.data, filterItem.field)"
                  >
                    生成枚举
                  </a-button>
                  <a-button
                    v-debounce
                    v-if="enumList.length"
                    size="small"
                    type="outline"
                    status="success"
                    @click="saveEnum"
                  >
                    保存枚举到系统
                  </a-button>
                </a-space>
              </a-space>
            </a-form-item>
          </template>
        </template>
      </template>
      <template v-if="filterItem.type === 'M'">
        <a-form-item label="过滤形式">
          <a-radio-group v-model="filterOption.filterForm">
            <a-radio value="1">单条件</a-radio>
            <a-radio value="2">或条件</a-radio>
            <a-radio value="3">且条件</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="过滤条件">
          <template v-if="['1'].includes(filterOption.filterForm)">
            <a-input-number v-model="filterOption.filterCondition.value[0]" placeholder="请输入过滤条件" allow-clear>
              <template #prepend>
                <a-select
                  v-model="filterOption.filterCondition.function[0]"
                  placeholder="请选择过滤条件"
                  style="width: 120px"
                >
                  <a-option
                    v-for="item in condition.NUMBER"
                    :key="item.function"
                    :value="item.function"
                    :label="item.label"
                  />
                </a-select>
              </template>
            </a-input-number>
          </template>
          <template v-if="['2', '3'].includes(filterOption.filterForm)">
            <a-space direction="horizontal" align="center">
              <div>{{ filterOption.filterForm === "2" ? "或" : "且" }}</div>
              <a-space direction="vertical">
                <a-input-number
                  v-model="filterOption.filterCondition.value[0]"
                  placeholder="请输入过滤条件"
                  allow-clear
                >
                  <template #prepend>
                    <a-select
                      v-model="filterOption.filterCondition.function[0]"
                      placeholder="请选择过滤条件"
                      style="width: 120px"
                    >
                      <a-option
                        v-for="item in condition.NUMBER"
                        :key="item.function"
                        :value="item.function"
                        :label="item.label"
                      />
                    </a-select>
                  </template>
                </a-input-number>
                <a-input-number
                  v-model="filterOption.filterCondition.value[1]"
                  placeholder="请输入过滤条件"
                  allow-clear
                >
                  <template #prepend>
                    <a-select
                      v-model="filterOption.filterCondition.function[1]"
                      placeholder="请选择过滤条件"
                      style="width: 120px"
                    >
                      <a-option
                        v-for="item in condition.NUMBER"
                        :key="item.function"
                        :value="item.function"
                        :label="item.label"
                      />
                    </a-select>
                  </template>
                </a-input-number>
              </a-space>
            </a-space>
          </template>
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
  <a-modal :header="false" :footer="false" v-model:visible="enumFormVisible" width="80%" draggable>
    <enum style="height: 400px; width: 100%" is-component v-model="enumForm" />
  </a-modal>
</template>
<script setup>
import dayjs from "@/utils/day"
import { condition, dateTypeMode } from "@/utils/dict"
import { enumList, getEnumList } from "@/hooks/useDataCube.js"
import { useComponent } from "@/hooks/userEditor"
import Enum from "@/views/datasource/cube/enum.vue"
import { Message } from "@arco-design/web-vue"
import cube from "@/views/datasource/api/cube.js"
const { currentComponent } = useComponent()
const visible = defineModel("visible", { default: false })
const props = defineProps({
  filterItem: {
    type: Object
  }
})
const defaultFilterOption = {
  filterType: "1",
  // 过滤形式
  filterForm: "1",
  // 过滤条件
  filterCondition: {
    function: ["like", "<="],
    value: ["", ""],
    // 排除选择的数据
    exclude: false
  },
  // 枚举对象
  enum: {
    content: [],
    code: ""
  },
  // 日期参数
  date: {
    startDate: {
      // 日期类型
      dateType: "day",
      // 相对时间 + -
      dateRelative: "-",
      // 日期值
      dateValue: 1,
      // 日期天数
      dateDay: ""
    },
    endDate: {
      // 日期类型
      dateType: "day",
      // 相对时间 + -
      dateRelative: "-",
      // 日期值
      dateValue: 1,
      // 日期天数
      dateDay: ""
    }
  }
}
const filterOption = ref({ ...defaultFilterOption })
watch(
  () => filterOption.value.filterType,
  (val) => {
    filterOption.value.filterCondition.value = ["", ""]
    filterOption.value.filterForm = defaultFilterOption.filterForm
  }
)
const dateValueChange = (val, type = "startDate") => {
  filterOption.value.date[type].dateDay = dayjs.operateDay(
    val,
    filterOption.value.date.startDate.dateRelative,
    filterOption.value.date.startDate.dateType
  )
}
const dateDayChange = (val, type = "startDate") => {
  const dateValue = dayjs.getDistanceDay(val, filterOption.value.date[type].dateType)
  if (dateValue < 0) {
    filterOption.value.date[type].dateRelative = "-"
    filterOption.value.date[type].dateValue = Math.abs(dateValue)
  } else {
    filterOption.value.date[type].dateRelative = "+"
    filterOption.value.date[type].dateValue = Math.abs(dateValue)
  }
}
const onSubmit = () => {
  visible.value = false
  currentComponent.value.data.filter.find((item) => item.field === props.filterItem.field).filter = filterOption.value
}
watch(visible, (val) => {
  if (val) {
    filterOption.value = {
      ...defaultFilterOption,
      ...props.filterItem.filter
    }
    if (filterOption.value.enum.code) {
      getEnumList(currentComponent.value.data, props.filterItem.field, filterOption.value.enum.code)
    } else {
      enumList.value = filterOption.value.enum.content
    }
  }
})
const saveEnum = () => {
  const params = {
    code: props.filterItem.field + currentComponent.value.data.datasource_id + currentComponent.value.data.cube_id,
    content: enumList.value,
    name: props.filterItem.title,
    field: props.filterItem.field,
    datasource_id: currentComponent.value.data.datasource_id,
    cube_id: currentComponent.value.data.cube_id
  }
  cube.dataCubeSaveEnum(params).then((res) => {
    filterOption.value.enum.code = params.code
    Message.success(res.message)
  })
}

const enumFormVisible = ref(false)
const enumForm = ref({})
watch(enumForm, (val) => {
  enumList.value = []
  filterOption.value.enum.code = val.code
  filterOption.value.enum.content = val.content
  enumList.value = val.content
  enumFormVisible.value = false
})

// 全选
const allSelect = (val) => {
  console.log(val)
  if (val) {
    filterOption.value.filterCondition.value = enumList.value.map((v) => v.value)
  } else {
    filterOption.value.filterCondition.value = []
  }
}
</script>

<style scoped lang="less"></style>
